<template>
	<view class="container">
		<u-top-tips ref="uTips"></u-top-tips>
			<view class="screening-tab">
				<view class="">
					<u-dropdown :close-on-click-mask="true" ref="filtDropdown" activeColor="#ff9900" :borderBottom="false">
						<u-dropdown-item @change=downChange v-model="changeValue" title="状态" :options="options1"></u-dropdown-item>
						<u-dropdown-item title="时间筛选">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<view class="filtrate">
									<!-- <view class="filtrate-title">商户名</view> -->
									<view class="filtrate-body">
										<u-form :model="searchForm" label-width="200">
											<u-form-item label="">
												<u-input v-model="searchForm.merName" placeholder="请输入要搜索的商户名" />
											</u-form-item>
										</u-form>
									</view>
									<view class="filtrate-btns">
										<u-button size='medium' shape="square" @click="searchCancel">取消</u-button>
										<u-button size='medium' type="warning" shape="square" @click="searchConfirm">确认</u-button>
									</view>
								</view>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		<view class="data-area">
			<view v-for="(item,index) in merList" :key="index">
				<u-card :title="item.user_name" :sub-title="item.status==1?'审核成功':item.status==2?'审核失败':'待审核'" :sub-title-color="item.status==1?'#19be6b':item.status==2?'#fa3534':'#ff9900'">
					<view class="" slot="body">
						<view>商户ID：<text>{{item.id}}</text></view>
						<view>审核原因：<text>{{item.opinion?item.opinion:'无审核原因'}}</text></view>
					</view>
					<view class="" slot="foot">
						<u-tag class="m-r" text="查看" @click="toDetails(item)" bg-color="#fff" size="mini" type="info" />
						<u-tag text="订单" @click="toOrders(item.id)" bg-color="#fff" size="mini" type="info" />
					</view>
				</u-card>
			</view>
		</view>
		<view class="more-area" v-if="isDataEmpty">
			<u-divider bg-color="#f4f4f5">{{showTips?'上拉加载更多':'已加载全部'}}</u-divider>
		</view>
		<view v-else class="empty-data">
			<u-empty text="暂时没有数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				showTips: 1,
				agentID: uni.getStorageSync('userID'),
				offset: 1,
				limit: 12,
				allOffset: 1,
				merList: [],
				isDataEmpty: true,
				changeValue: null,
				options1: [{
					label: '全部',
					value: null
				}, {
					label: '待审核',
					value: 0
				}, {
					label: '审核成功',
					value: 1
				}, {
					label: '审核失败',
					value: 2
				}],
				searchForm: {},
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中...'
			});
			this.againMerData();
			this.getMerList();
		},
		onLoad() {

		},
		methods: {
			// 根据选择状态 获取数据
			downChange(e) {
				uni.showLoading({
					title: '加载中...'
				});
				this.againMerData();
				this.getMerList();
			},
			searchCancel() {
				this.$refs.filtDropdown.close();
			},
			searchConfirm() {
				let formData = this.searchForm;
				if (formData.merName === undefined || formData.merName.length < 1) {
					this.$refs.uTips.show({
						title: '请输入商户名称',
						type: 'warning',
						duration: '2000'
					});
				} else {
					uni.showLoading({
						title: '加载中...'
					});
					this.againMerData();
					this.getMerList();
					this.$refs.filtDropdown.close();
				}
			},
			againMerData() {
				this.showTips = 1;
				this.offset = 1;
				this.limit = 12;
				this.allOffset = 1;
				this.merList = [];
			},
			toDetails(info) {
				info = JSON.stringify(info);
				uni.navigateTo({
					url: `./details?info=${info}`,
				});
			},
			toOrders(id) {
				uni.navigateTo({
					url: `../order-list/index?id=${id}`,
					animationType: 'pop-in',
					animationDuration: 2000
				});
			},
			getMerList() {
				let that = this;
				this.$request.httpTokenRequest({
					url: '/admin/general/userList',
					method: 'POST',
					data: {
						agentID: that.agentID,
						offset: that.offset,
						limit: that.limit,
						name: that.searchForm.merName === undefined ? '' : that.searchForm.merName,
						status: that.changeValue === null ? '' : that.changeValue,
					},
					// needToken:false,
				}).then(res => {
					if (res.data.code === 200) {
						uni.hideLoading();
						that.merList = that.merList.concat(res.data.content.user);
						that.allOffset = Math.ceil(res.data.content.count / that.limit);
						if (res.data.content.count < that.limit) this.showTips = 0;
						res.data.content.count > 0 ? that.isDataEmpty = true : that.isDataEmpty = false;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, error => {});
			}
		},
		onReachBottom() {
			if (this.offset >= this.allOffset) {
				this.showTips = 0
				return false;
			}
			this.offset += 1
			this.getMerList();
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ uni-view .u-icon .u-icon--right,
	.u-icon--right[data-v-6e20bb40],
	.u-td {
		justify-content: center !important;
	}

	// .u-td{
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	white-space: nowrap;
	// }
	uni-page-body {
		// min-height: 100%;
		background: #f4f4f5;
	}

	.container {
		width: 100%;
		// min-height: 100%;
		.screening-tab {
			width: 100%;
			background: #FFFFFF;

			.filtrate {
				width: 90%;
				margin: 0 auto;

				.filtrate-title {
					font-size: 20rpx;
				}

				.filtrate-body {
					padding: 20rpx 30rpx;
				}

				.filtrate-btns {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.data-area {
			margin-top: .5rem;
			z-index: 1;
		}

		.more-area {
			padding: 1rem 0;
		}

		.empty-data {
			padding-top: 6rem;
		}
	}
</style>
